<template>
  <v-chart ref="chart" class="chart" :option="option" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'PieChart1',
  props: ['rData'],
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        series: [
          {
            name: '分布',
            type: 'pie',
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
              formatter: (params) => {
                return Math.round(params.percent) + '%'
              },
              distanceToLabelLine: -30
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 785223,
                name: '男',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#1DAAFC' },
                      { offset: 1, color: '#92DFFC' }
                    ]
                  )
                }
              },
              {
                value: 210241,
                name: '女',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#F8A428' },
                      { offset: 1, color: '#FDC04D' }
                    ]
                  )
                }
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    resize() {
      this.$refs['chart'].resize()
    }
  }
}
</script>

<style>

</style>
